import { Image, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import addImage from "../../image/add4.png";
import { AtMessage } from "taro-ui";
import { ImageUrl } from "../../utils/request";
import { connect } from "react-redux";
import "./index.scss";

type GoodsCard = {
  attribute: string;
  categoryId: number;
  createTime: string;
  goodsId: number;
  goodsName: string;
  goodsPicture: string;
  isShow: number;
  price: number;
  quantity: number;
  stockId: number;
  updateTime: string;
};
const index = (props: GoodsCard) => {
  return (
    <View
      className="SmallGoodCardWrapper"
      onClick={() => {
        Taro.redirectTo({
          url: "/pages/detailpage/index?id=" + props.goodsId
        });
      }}
    >
      <AtMessage />
      {/* 左侧图片 */}
      <View className="ImageWrapper">
        <View style={{ width: "100%", height: "100%", display: "flex" }}>
          <Image
            className="ImageStype"
            src={ImageUrl + props.goodsPicture}
          ></Image>
        </View>
      </View>
      {/* 右侧内容 */}
      <View className="ItemWrapper">
        <Text className="ItemTitle">{props.goodsName}</Text>
        <Text style={{ fontSize: 11, display: "block", margin: "3px 0" }}>
          剩余 {props.quantity}
        </Text>
        <Text className="ItemPrice">￥{props.price}</Text>
      </View>
      <Image
        className="AddImage"
        src={addImage}
        onClick={e => {
          e.stopPropagation();

          props.dispatch({
            type: "cart/addCartList",
            payload: {
              id: props.goodsId,
              picture: props.goodsPicture,
              title: props.goodsName,
              price: props.price,
              num: props.quantity,
              onSelect: false,
              stockId: props.stockId
            }
          });

          Taro.atMessage({
            message: "已加入购物车",
            type: "success",
            duration: 1000
          });
        }}
      ></Image>
    </View>
  );
};
export default connect(({ cartList }) => ({ cartList }))(index);
